<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			// ES6 加强了对 Unicode 的支持，允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的 Unicode 码点
			// 但是，这种表示法只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符，必须用两个双字节的形式表示
			let ch = "\u0061" // "a"
			let a = "\uD842\uDFB7" // "𠮷"
			// 如果直接在\u后面跟上超过0xFFFF的数值（比如\u20BB7），JavaScript 会理解成\u20BB+7
			// 由于\u20BB是一个不可打印字符，所以只会显示一个空格，后面跟着一个7
			let b = "\u20BB7" // " 7"
			// ES6 对这一点做出了改进，只要将码点放入大括号，就能正确解读该字符
			let c = "\u{20BB7}" //"𠮷"
			'\u{1F680}' === '\uD83D\uDE80' // true

			// ES6 为字符串添加了遍历器接口，使得字符串可以被for...of循环遍历
			for (let codePoint of 'hello') {
				console.log(codePoint)
				// "h"
				// "e"
				// "l"
				// "l"
				// "o"
			}

			// 模板字符串
			// 传统写法
			document.body.insertAdjacentHTML("beforeend", "<ul>" +
				"<li><a href='//www.baidu.com'>百度</a></li>" +
				"<li><a href='//www.google.com'>谷歌</a></li>" +
				"</ul>"
			);
			// ES6写法
			document.body.insertAdjacentHTML("beforeend",
				`<ul>
					<li><a href="//www.baidu.com">百度</a></li>
					<li><a href="//www.google.com">谷歌</a></li>
				</ul>`
			);
			// 字符串中嵌入变量
			let name = "Bob",
				time = "today";
			let s = `Hello ${name}, how are you ${time}?`
			// 大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，引用对象属性，以及调用函数
			let x = 1;
			let y = 2;
			console.log(`${x} + ${y} = ${x + y}`); // "1 + 2 = 3"
			console.log(`${x} + ${y * 2} = ${x + y * 2}`); // "1 + 4 = 5"
			let obj = {
				x: 1,
				y: 2
			};
			console.log(`${obj.x + obj.y}`); // "3"
			function fn(a, b) {
				return a + b;
			}
			console.log(`foo ${fn("Hello World", 10)} bar`); // foo Hello World10 bar

			// 标签模板
			alert`abc`; // 等同于 alert(abc);
			console.log`abc`; //不同于 console.log(abc)
			// “标签模板”的一个重要应用，就是过滤 HTML 字符串，防止用户输入恶意内容
			function SaferHTML(templateData) {
				let s = templateData[0];
				for (let i = 1; i < arguments.length; i++) {
					let arg = String(arguments[i]);
					// 转义不安全字符
					s += arg.replace(/&/g, "&amp;")
						.replace(/</g, "&lt;")
						.replace(/>/g, "&gt;");
					//其他字符不转义
					s += templateData[i];
				}
				return s;
			}
			let sender = `<a href="javascript:alert('abc')"></a>`; // 恶意代码
			let message = SaferHTML`<p>${sender} has sent you a message.</p>`;
			console.log(message);
		</script>
	</body>
</html>
